const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var { WebpackManifestPlugin } = require('webpack-manifest-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
const RemoveEmptyMiniCssChunk = require('./my-test-plugin');

module.exports = {
	context: __dirname,
	mode: "development",
	entry: {
		main: "./App/index.js",
		// main2: "./App/index2.js",
	},
	optimization: {
		splitChunks: {
			cacheGroups: {
				venderCss: {
					test: /\.css$/,
					chunks: 'all',
					minChunks: 1,
					minSize: 0,
					name: 'vender-css'
				},
				// venderCss2: {
				// 	test: /index2\.css$/,
				// 	chunks: 'all',
				// 	minChunks: 1,
				// 	minSize: 0,
				// 	name: 'vender-css2'
				// },
				// venderJs: {
				// 	test: /\.js$/,
				// 	chunks: 'all',
				// 	minChunks: 1,
				// 	minSize: 0,
				// 	name: 'vender-js'
				// }
			}
		}
	},
	output: {
		path: path.resolve(__dirname, "./dist"),
		filename: '[name]_[chunkhash].js',
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, "css-loader"],
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './App/template.html'
		}),
		new MiniCssExtractPlugin({
			filename: '[name]2.css',
			chunkFilename: '[name][contenthash].css'
		}),
		new WebpackManifestPlugin(),
		new RemoveEmptyMiniCssChunk(),
		new CleanWebpackPlugin(),
	],
};
